<template>
	<view>
		<view v-for="(item,index) in detalilist" :key="index" style="height: 22px;">
			<image class="img1" :src="item.logo" mode=""></image>
			<p style="margin-left: 150px;">
				<!-- <span style="float: left; background-color: yellow;">品牌</span> -->
				{{item.shopname}}
			</p>
			<p style="margin-left: 140px; font-size: 13px;">{{item.content}}</p>
		</view>
		<u-tabs :list="list1"></u-tabs>
		<p style="width: 100%; height: auto; background-color: #f0f0f0; font-size: 13px;">商品食品</p>
		<div class="list1">
			<div v-for="(item,index) in list" :key="index">
				<div class="list1-l">
					<image class="de1" :src="item.foodpic" mode=""></image>
				</div>
				<div class="list1-r">
					<p style="width: 100%; height: 30px;">{{item.foodname}}</p>
					<p style="font-size: 13px;">{{item.descr}}</p>
					<p>
						<span style="color: red; float: left;">￥{{item.price}}</span>
						<!-- <button class="btn">+</button> -->
						<u-number-box style="float: right;" :min="0" v-model="item.maxcount"
							@change="valChange"></u-number-box>
					</p>
				</div>
				<view class="footer">
					<div class="footer-l">
						<image style="width: 50px; height: 50px; float: left;" src="../../static/购物车.png" mode="">
						</image>
						<p style="line-height: 70px; font-size: 13px;">配送费￥10元</p>

					</div>
					<div class="footer-r">

					</div>
				</view>
			</div>

		</div>

	</view>

</template>

<script>
	export default {

		data() {
			return {
				detalilist: [],
				list1: [{
					name: '点餐',
				}, {
					name: '评价',
				}],
				list: [],
				value: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		},
		onLoad(e) {
			var id = e.id
			var that = this
			uni.request({
				url: 'http://192.168.137.190:8002/admin/shoplistone',
				method: 'GET',
				data: {
					id: id
				},
				success(res) {
					console.log(res, '详情')
					that.detalilist = res
					console.log(that.detalilist, '详情数据')
				},
			})
			uni.request({

				url: 'http://192.168.137.190:8002/admin/vueshopgoods',
				method: 'GET',
				data: {
					id: id
				},
				success(res) {
					console.log(res, '00000')
					that.list = res.data
					console.log(that.list, '000001')
				},
			})
		}
	}
</script>

<style>
	.img1 {
		width: 60px;
		height: 60px;
		margin-left: 150px;
	}

	.list1 {
		width: 100%;
		height: 80px;
		margin-top: 10px;

	}

	.list1-l {
		float: left;
		width: 80px;
		height: 80px;
	}

	.de1 {
		width: 100%;
		height: 100%;
	}

	.list1-r {
		float: left;
		height: 80px;
		width: 265px;
	}

	.btn {
		width: 20px;
		height: 20px;
		background-color: #02A774;
		border-radius: 50%;
		color: #fff;
		line-height: 20px;
		padding-left: 5px;
		float: right;
	}

	.footer {
		width: 100%;
		height: 50px;
		background-color: #ccc;
		position: fixed;
		bottom: 0;
		color: #fff;
	}

	.footer-l {
		width: 70%;
		height: 100%;
		float: left;
		background-color: #141D27;
	}

	.footer-r {
		width: 30%;
		height: 100%;
		float: left;
		background-color: #2B333B;
	}
</style>